window.onload = async function () {
    const { data: res } = await get('/dashboard')
    console.log(res);
    const { data: { overview, year, salaryData, groupData, provinceData, } } = res
    for (let k in overview) {
        document.querySelector('[name=' + k).innerHTML = overview[k]
    }
    console.log(year)
    a(year),
        b(salaryData)
    c(groupData)
    d(provinceData)
    e(salaryData)
    const btns = document.querySelector('#btns')
    // btns.addEventListener('click', function (e) {
    //     if (e.target.tagName === 'BUTTON') {
    //         btns.querySelector('.btn-blue')?.classList.remove('btn-blue');
    //         e.target.classList.add('btn-blue')
    //         const num = e.target.innerHTML
    //         c(groupData, num)
    //     }
    // })
    const btnss = document.querySelectorAll('#btns button')
    console.log(btnss);
    for(let i = 0; i < btnss.length; i++){
        btnss[i].addEventListener('click', function () {
            btns.querySelector('.btn-blue')?.classList.remove('btn-blue');
            btnss[i].classList.add('btn-blue')
            c(groupData, i+1)
        })
    }
}

const a = data => {
    const myChart = echarts.init(document.getElementById('line'));
    myChart.setOption({
        title: {
            text: '杭州黑马36期',
            top: '5%',
            left: '2%',
        },
        color: [{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
                offset: 1, color: '#5D75F0' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }, 'red'],
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            type: "category",
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            data: data.map((item) => item.month),
            //设置坐标轴轴线样式（颜色和虚线）
            axisLine: {
                lineStyle: {
                    color: "#ccc",
                    type: "dashed",
                },
            },
            //坐标轴标签的颜色
            axisLabel: {
                color: "#333",
            },
        },
        yAxis: {
            type: "value",
            //分隔线的样式
            splitLine: {
                lineStyle: {
                    type: "dashed",
                },
            },
        },
        grid: {
            //网格距离上方距离
            top: 60,
        },
        series: [
            {
                data: data.map((item) => item.salary),
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 6,
                },
                symbolSize: 10,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "#499FEE",
                        },
                        {
                            offset: 0.8,
                            color: "rgba(255,255,255,0.2)",
                        },
                        {
                            offset: 1,
                            color: "rgba(255,255,255,0)",
                        },
                    ]),
                },
            },

        ]
    }
    );
}
const b = data => {
    const myChart = echarts.init(document.getElementById('salary'));
    myChart.setOption({
        color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
        title: {
            text: '班级新资分布',
            top: 15,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '90%',
            left: 'center'
        },
        series: [
            {
                name: '班级新资分布',
                type: 'pie',
                radius: ['50%', '64%'],
                center: ["50%", "45%"],
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: "center",
                },
                labelLine: {
                    show: false
                },
                data: data.map(item => {
                    return {
                        value: item.g_count + item.b_count,
                        name: item.label,
                    }
                })
            }
        ]
    })
}
const c = (data, num = 1) => {
    // console.log(data);
    const myChart = echarts.init(document.getElementById('lines'));
    myChart.setOption({
        xAxis: {
            type: 'category',
            data: data[num].map(item => item.name),
            axisLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#333'
                },
            },
            axisLabel: {
                color: "#999",
            },
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                }
            }
        },
        tooltip: {
            trigger: "item",
        },
        color: [
            {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: "#34D39A", // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: "rgba(52,211,154,0.2)", // 100% 处的颜色
                    },
                ],
            },
            {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: "#499FEE", // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: "rgba(73,159,238,0.2)", // 100% 处的颜色
                    },
                ],
            },
        ],
        series: [
            {
                data: data[num].map(item => item.hope_salary),
                type: 'bar'
            },
            {
                data: data[num].map(item => item.salary),
                type: 'bar'
            },
        ]
    })
}
const d = data => {
    const myChart = echarts.init(document.getElementById('lines'));
    const myEchart = echarts.init(document.querySelector('#map'))
    const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
    ]
    let option = {
        title: {
            text: '籍贯分布',
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff',
            },
        },
        visualMap: {
            min: 0,
            max: 6,
            left: 'left',
            bottom: '20',
            text: ['6', '0'],
            inRange: {
                color: ['#ffffff', '#0075F0'],
            },
            show: true,
            left: 40,
        },
        geo: {
            map: 'china',
            roam: false,
            zoom: 1.0,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)',
                },
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    color: '#e0ffff',
                },
                emphasis: {
                    areaColor: '#34D39A',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        series: [
            {
                name: '籍贯分布',
                type: 'map',
                geoIndex: 0,
                data: dataList,
            },
        ],
    }
    myEchart.setOption(option)
}
const e = data => {
    const myChart = echarts.init(document.getElementById('gender'));
    // var datas = [
    //     ////////////////////////////////////////
    //     data.map(item => {
    //         // label
    //         // g_count
    //         const { label:name,g_count,b_count:value} = item
    //         return {name,value}
    //         // return { item. }
    //     }),
    //     // ////////////////////////////////////////
    //     data.map(item => {
    //             // label
    //             // g_count
    //             const { label:name,g_count:value,b_count} = item
    //             return {name,value}
    //             // return { item. }
    //         })
    //     ,
    //     ////////////////////////////////////////
    // ];
    myChart.setOption({
        title: [{
            text: '男女薪资分布',
            left: '6%',
            top: '2%',
            textStyle: {
                color: '#333',
                fontWeight: '700',
                fontSize: 16
            }
        },{
            text: '男生',
            left: '45%',
            top: '45%',
            textStyle: {
                color: '#333',
                fontWeight: '700',
                fontSize: 12
            }
        },{
            text: '女生',
            left: '45%',
            top: '85%',
            textStyle: {
                color: '#333',
                fontWeight: '700',
                fontSize: 12
            }
        }],
        tooltip: {
            trigger: 'item'
        },
        
        color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
        
        series: [
            {
                name: '班级新资分布',
                type: 'pie',
                radius: ['20%', '30%'],
                center: ["50%", "25%"],
                data: data.map(item => {
                    return {
                        value:item.b_count,
                        name: item.label,
                    }
                })
            },
            {
                name: '班级新资分布',
                type: 'pie',
                radius: ['20%', '30%'],
                center: ["50%", "65%"],
                data: data.map(item => {
                    return {
                        value:item.g_count,
                        name: item.label,
                    }
                })
            }
        ]
    })
}